<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>GoodHR 助手</title>
    <!-- OCR功能已迁移到服务器端 -->
    <style>
        body {
            width: 300px;
            height: 600px;
            padding: 0;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: #f5f7fa;
        }

        .container {

            background: #fff;
            /* 白色背景 */
            border-radius: 12px;
            margin: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .header {
            background: #1a73e8;
            padding: 10px;
            color: white;
            text-align: center;
        }

        .header h1 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }

        /* 选项卡样式 */
        .tab-container {
            display: flex;
            background: #f8f9fa;
            border-bottom: 1px solid #e0e3e7;
        }

        .tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: #666;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
        }

        .tab.active {
            color: #1a73e8;
            border-bottom-color: #1a73e8;
            background: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* AI配置按钮样式 */
        .ai-config-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #ff6b35;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 11px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .ai-config-btn:hover {
            background: #e55a2b;
        }

        /* AI配置弹窗样式 */
        .ai-config-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .ai-config-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 8px;
            width: 280px;

            overflow-y: auto;
        }

        .ai-config-content h3 {
            margin: 0 0 15px 0;
            color: #1a73e8;
            font-size: 16px;
        }

        .ai-config-content label {
            display: block;
            margin-bottom: 5px;
            font-size: 12px;
            color: #666;
        }

        .ai-config-content input,
        .ai-config-content select {
            width: 100%;
            padding: 8px;
            border: 1px solid #e0e3e7;
            border-radius: 4px;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .ai-config-content .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: #666;
        }

        .ai-config-content .save-btn {
            background: #1a73e8;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .ai-config-content .save-btn:hover {
            background: #1557b0;
        }



        .filter-group {
            padding: 6px;
            border-bottom: 1px solid #eef0f2;
        }

        .filter-group:last-child {
            border-bottom: none;
        }

        .filter-group label.title {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #1a73e8;
            font-size: 13px;
        }

        .keyword-input-group {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }

        .keyword-input {
            flex: 1;
            padding: 6px 8px;
            border: 1px solid #e0e3e7;
            border-radius: 6px;
            font-size: 13px;
            transition: border-color 0.2s;
        }

        .keyword-btn {
            padding: 6px 16px;
            background: #1a73e8;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .keyword-btn:hover {
            background: #1557b0;
        }

        .keyword-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* 转圈动画 */
        .spinner {
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 5px;
            vertical-align: middle;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .keyword-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;

        }

        .keyword-tag {
            background: #e8f0fe;
            border: 1px solid #1a73e8;
            padding: 2px 4px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #1a73e8;
        }

        .keyword-tag button {
            background: none;
            border: none;
            color: #1a73e8;
            cursor: pointer;
            padding: 0;
            font-size: 16px;
            line-height: 1;
            opacity: 0.7;
        }

        .keyword-tag button:hover {
            opacity: 1;
        }

        .checkbox-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #666;
            padding: 4px 0;
        }

        .checkbox-wrapper input[type="checkbox"] {
            width: 14px;
            height: 14px;
            margin: 0;
        }

        .checkbox-label {
            user-select: none;
            cursor: pointer;
        }

        /* 确保底部控制按钮样式正确 */
        .control-buttons {
            display: flex;
            gap: 8px;
            padding: 12px;
        }

        .control-buttons .btn {
            flex: 1;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
        }

        .start-btn {
            background: #00c853;
            color: white;
        }

        .stop-btn {
            background: #ff4444;
            color: white;
        }

        /* 添加图标 */
        .icon {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

        .input-wrapper {
            gap: 8px;
            font-size: 12px;
            color: #666;
            margin-top: 3px;
        }

        .number-input {
            width: 60px;
            padding: 4px 8px;
            border: 1px solid #e0e3e7;
            border-radius: 4px;
            font-size: 13px;
        }

        .input-label {
            user-select: none;
        }

        input-con {
            font-size: 12px !important;
            color: #ed7878 !important;

        }

        .position-input-group {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }

        .position-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            /* margin-bottom: 8px; */
            padding: 2px;
            /* min-height: 32px; */
            border: 1px dashed #e0e3e7;
            border-radius: 6px;
        }

        .position-tag {
            background: #f0f2f5;
            border: 1px solid #e0e3e7;
            padding: 4px 8px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .position-tag:hover {
            background: #e8f0fe;
            border-color: #1a73e8;
            color: #1a73e8;
        }

        .position-tag.active {
            background: #1a73e8;
            color: white;
            border-color: #1557b0;
        }

        .position-tag .remove-btn {
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            padding: 0 2px;
            font-size: 14px;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .position-tag .remove-btn:hover {
            opacity: 1;
        }

        .position-tag.active .remove-btn {
            color: white;
        }

        .bottom-controls {
            padding: 12px;
            background: #fff;
        }

        .initial-buttons {
            display: flex;
            gap: 12px;
        }

        .btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .primary-btn {
            background: #1a73e8;
            color: white;
        }

        .primary-btn:hover {
            background: #1557b0;
        }

        .danger-btn {
            background: #dc3545;
            color: white;
            width: 100%;
        }

        .danger-btn:hover {
            background: #bb2d3b;
        }

        .hidden {
            display: none;
        }

        /* 添加按钮切换动画 */
        .initial-buttons,
        .stop-buttons {
            transition: opacity 0.3s ease;
        }

        .hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 添加排行榜样式 */
        .ranking-list {
            margin: 10px 0;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 8px;
            max-height: 800px;
            overflow-y: auto;
        }

        .ranking-item {
            display: flex;
            align-items: center;
            padding: 8px;
            margin-bottom: 4px;
            background: white;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .ranking-number {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a73e8;
            color: white;
            border-radius: 50%;
            margin-right: 8px;
            font-size: 12px;
            font-weight: bold;
        }

        .ranking-info {
            flex: 1;
        }

        .ranking-name {
            font-weight: 600;
            color: #1a73e8;
            margin-bottom: 2px;
        }

        .ranking-desc {
            font-size: 12px;
            color: #666;
        }

        .ranking-price {
            color: #f44336;
            font-weight: bold;
            margin-left: 8px;
        }

        /* 前三名特殊样式 */
        .ranking-item:nth-child(1) .ranking-number {
            background: #ffd700;
        }

        .ranking-item:nth-child(2) .ranking-number {
            background: #c0c0c0;
        }

        .ranking-item:nth-child(3) .ranking-number {
            background: #cd7f32;
        }

        /* 岗位说明样式 */
        .job-description {
            width: 250px;
            min-height: 150px;
            max-height: 250px;
            padding: 8px;
            border: 1px solid #e0e3e7;
            border-radius: 6px;
            font-size: 12px;
            resize: vertical;
            font-family: inherit;
            margin-bottom: 8px;
        }

        .ai-status {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 10px;
            font-size: 12px;
        }

        .ai-status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ccc;
        }

        .ai-status-indicator.connected {
            background: #00c853;
        }

        .ai-status-indicator.disconnected {
            background: #ff4444;
        }

        /* 广告样式 */
        .ad-container {
            transition: opacity 0.3s ease;
        }

        .ad-container:hover {
            opacity: 0.9;
        }

        .ad-container .ad-title {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .ad-container .ad-content {
            line-height: 1.4;
        }

        .ad-container .ad-close-btn:hover {
            background: rgba(0, 0, 0, 0.4) !important;
        }

        .ad-top {
            order: -1;
        }

        .ad-middle {
            margin: 12px 0;
        }

        .ad-bottom {
            margin-top: 12px;
        }
    </style>


</head>

<body>
    <div class="container">
        <div class="header">
            <h1>Good!HR 助手<span id="version"></span></h1>
            <span>免费的HR助手，帮你打招呼</span>
            <span>作者接小程序、app、后台管理系统。定制开发</span>
        </div>

        <!-- 选项卡 -->
        <div class="tab-container">
            <div class="tab active" data-tab="free">免费版</div>
            <div class="tab" data-tab="ai">AI高级版(试用3天)</div>
        </div>

        <!-- 免费版内容 -->
        <div class="tab-content active" id="free-tab">
            <div style="height: 330px; overflow-y: scroll;">
                <div
                    style="text-align: center; padding: 5px; background: #f0f8ff; color: #1a73e8; font-size: 11px; border-bottom: 1px solid #e0e3e7;">
                    ↓ 可以往下滑动查看更多设置 ↓
                </div>
                <div class="filter-group">
                    <label class="title">账号绑定</label>
                    <div class="position-input-group">
                        <input type="text" id="phone-input" class="keyword-input" placeholder="输入手机号以同步配置">
                        <button id="bind-phone" class="keyword-btn">绑定</button>
                    </div>
                    <div style="font-size: 12px; color: #666; margin-top: 4px;">
                        * 绑定手机号后可以从服务器同步你的配置(关键词等等)(无需验证)
                    </div>
                </div>

                <div class="filter-group">
                    <label class="title">岗位管理</label>
                    <div class="position-input-group">
                        <input type="text" id="position-input" class="keyword-input" placeholder="添加岗位(关键词分组,回车键添加)">
                        <button id="add-position" class="keyword-btn">添加</button>
                    </div>
                    <div class="position-tags" id="position-list"></div>
                </div>

                <div class="filter-group">
                    <div style="margin-bottom: 8px;">
                        <label class="checkbox-wrapper">
                            <input type="checkbox" id="keywords-and-mode">
                            <span class="checkbox-label">全部关键词都必须匹配</span>
                        </label>
                    </div>
                    <div class="keyword-input-group">
                        <div>
                            <input type="text" id="keyword-input" class="keyword-input" placeholder="输入关键词"
                                style="width: 100px;">
                        </div>

                        <div style="display: flex;flex: 1;gap: 5px;">
                            <button id="add-exclude-keyword" class="keyword-btn"
                                style="background: #ff4444;">排除</button>
                            <button id="add-keyword" class="keyword-btn">添加</button>
                        </div>
                    </div>
                    <div class="keyword-list" id="keyword-list"></div>
                    <div class="keyword-list" id="exclude-keyword-list"></div>
                </div>

                <div class="filter-group">
                    <div style="margin-bottom: 8px;">
                        <span class="input-label">打招呼暂停数</span>

                        <label class="input-wrapper">
                            <div>
                                <input type="number" id="match-limit" class="number-input" min="1" value="200">

                            </div>
                            <span class="input-label">* 打招呼成功多少后停止</span>

                        </label>
                    </div>

                    <div style="margin-bottom: 8px;">
                        <span class="input-label">随机延迟秒数</span>

                        <label class="input-wrapper">
                            <div style="gap: 5px;display: flex;">
                                <input type="number" id="delay-min" class="number-input" min="1" value="3"
                                    max="9">到<input type="number" id="delay-max" class="number-input" min="1" value="5"
                                    max="10">
                            </div>
                            <span class="input-label">* 随机模拟停止的时间段 0-10秒，默认3-5</span>
                        </label>
                    </div>

                    <div style="margin-bottom: 8px;">
                        <span class="input-label">点击候选人频率</span>
                        <label class="input-wrapper">
                            <div>
                                <input type="number" id="click-frequency" class="number-input" min="0" max="10"
                                    value="7">
                            </div>
                            <span class="input-label">* 每浏览10个候选人中随机点击查看的数量(填10 就每个都查看)</span>
                        </label>
                    </div>

                    <div style="margin-bottom: 8px;">
                        <label class="input-wrapper">
                            <span class="input-label">启用提示音</span>
                            <input type="checkbox" id="enable-sound" checked>
                        </label>
                    </div>
                </div>

                <div class="filter-group">
                    <label class="title">使用说明</label>
                    <label class="checkbox-wrapper">
                        <span class="checkbox-label">
                            <p>案例： 招聘一个英语老师、本科、英语4级、40岁以下、女</p>
                            <p>1. 在平台比如boos 推荐牛人页面 的筛选功能中 现在筛选好 基本信息。40岁以下、女、本科、等等</p>
                            <p>2. 打开插件 。添加岗位"英语老师"(回车键添加)，关键词"英语老师"，排除关键词(回车键添加)</p>
                            <p>3. 点击打招呼，开始打招呼 请在运行时注意观察一下。及时调整关键词</p>
                            <p>4. 刷新浏览器可以暂停</p>
                        </span>
                    </label>
                </div>

                <div class="filter-group">
                    <label class="title">打赏记录</label>
                    <div id="ranking-list" class="ranking-list">
                        <!-- 排行榜数据将在这里动态显示 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- AI高级版内容 -->
        <div class="tab-content" id="ai-tab">
            <button class="ai-config-btn" id="ai-config-btn">AI配置</button>

            <div style="height: 330px; overflow-y: scroll;">
                <div
                    style="text-align: center; padding: 5px; background: #f0f8ff; color: #1a73e8; font-size: 11px; border-bottom: 1px solid #e0e3e7;">
                    ↓ 可以往下滑动查看更多设置 ↓
                </div>
                <div class="filter-group">
                    <label class="title">账号绑定(新用户试用3天)</label>
                    <div class="position-input-group">
                        <input type="text" id="ai-phone-input" class="keyword-input" placeholder="输入手机号以同步配置">
                        <button id="ai-bind-phone" class="keyword-btn">绑定</button>
                    </div>
                    <div style="font-size: 12px; color: #666; margin-top: 4px;">
                        * 绑定手机号后可以从服务器同步你的配置(无需验证)(新用户绑定后自动试用3天)
                    </div>
                </div>

                <div class="filter-group">
                     <div style=" margin-bottom: 10px;display: flex;align-items: center;">
                                            <label class="title" style="margin-bottom:0px">AI状态</label>

                                            <span style="font-size: 11px; color: #666;margin-left: 10px;"> 价格25/月，50元/永久<a href="https://goodhr.58it.cn" target="_blank">咨询购买</a></span>
                        
                    </div>
                    <div class="ai-status">
                        <div class="ai-status-indicator" id="ai-status-indicator"></div>
                        <span id="ai-status-text">未连接</span>
                        <span id="ai-expire-text" style="margin-left: 10px; font-size: 11px; color: #666;"></span>
                    </div>
                    <div class="ai-balance-info" id="ai-balance-info"
                        style="font-size: 11px; color: #666; margin-top: 5px; display: none;">
                        <span id="ai-balance-text">轨迹流动余额: --</span>   <span >* 获取Token请访问：<a href="https://goodhr.58it.cn/describe.html" target="_blank">AI配置教程</a></span>
                    </div>
                    <div style="font-size: 11px; color: #666; margin-bottom: 10px;">
                        
                    </div>
                   
                </div>



                <div class="filter-group">
                    <label class="title">岗位管理</label>
                    <div class="position-input-group">
                        <input type="text" id="ai-position-input" class="keyword-input" placeholder="添加岗位(回车键添加)">
                        <button id="ai-add-position" class="keyword-btn">添加</button>
                    </div>
                    <div class="position-tags" id="ai-position-list"></div>
                </div>

                <div class="filter-group" id="ai-job-description-group" style="display: none;">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <label class="title">岗位要求</label>
                        <button id="ai-optimize-job-description" class="keyword-btn" style="font-size: 12px; padding: 4px 8px;">AI优化</button>
                    </div>
                    <textarea id="job-description" class="job-description"
                        placeholder="请详细描述岗位要求，包括：&#10;1. 任职要求&#10;2. 技能要求&#10;3. 经验要求&#10;4. 其他要求&#10;&#10;AI将根据这些信息智能判断候选人是否合适&#10;输入岗位要求后点击右上角的AI优化按钮，系统会根据岗位要求优化岗位描述"></textarea>
                </div>

                <div class="filter-group">
                    <label class="title">设置说明</label>
                    <div style="margin-bottom: 8px;">
                        <span class="input-label">* AI版本使用免费版的设置：随机延迟、打招呼暂停数、点击候选人频率、启用提示音</span>
                    </div>
                </div>


                <div class="filter-group">
                    <label class="title">AI提示语:</label>
                    <textarea id="ai-click-prompt" class="job-description"
                        placeholder="请输入AI提示语，使用${候选人信息}和${岗位信息}作为标记符">你是一个资深的HR专家。请根据候选人的基本信息判断是否值得查看其详细信息。

重要提示：
1. 这个API仅用于岗位与候选人的筛选。如果内容不是这些，你应该返回"内容与招聘无关 无法解答"。
2. 请根据岗位要求判断是否值得查看这位候选人的详细信息。
3. 必须返回JSON格式，包含decision和reason两个字段。
4. decision字段只能是"是"或"否"。
5. reason字段是决策原因，10个字以内。

岗位要求：
\${岗位信息}

候选人基本信息：
\${候选人信息}

请判断是否值得查看这位候选人的详细信息，返回JSON格式：{"decision":"是","reason":"符合基本要求"}
                    </textarea>
                    <div style="font-size: 11px; color: #666; margin-bottom: 10px;">
                        * 使用${候选人信息}和${岗位信息}作为标记符，系统会自动替换为实际内容
                    </div>




                </div>




                <div class="filter-group">
                    <label class="title">公司信息</label>
                    <div style="margin-bottom: 8px;">
                        <textarea id="company-info" class="job-description" placeholder="请输入公司相关信息，包括但不限于：公司名称、公司地址、公司规模、公司行业、公司简介、公司文化/价值观、福利待遇、工作地点、公司官网等"></textarea>
                    </div>
                </div>

                <div class="filter-group">
                    <label class="title">岗位额外信息</label>
                    <div style="margin-bottom: 8px;">
                        <textarea id="job-extra-info" class="job-description" placeholder="请输入岗位额外信息，包括但不限于：岗位职责、任职要求、薪资范围、工作时间、是否加班、岗位福利、晋升空间、团队介绍、工作环境描述等"></textarea>
                    </div>
                </div>

                <div class="filter-group">
                    <label class="title">沟通处理设置</label>
                    <label class="checkbox-wrapper">
                        <input type="checkbox" id="collect-phone" class="checkbox-input" checked>
                        <span class="checkbox-label">收集手机号</span>
                    </label>
                    <label class="checkbox-wrapper">
                        <input type="checkbox" id="collect-wechat" class="checkbox-input" checked>
                        <span class="checkbox-label">收集微信号</span>
                    </label>
                    <label class="checkbox-wrapper">
                        <input type="checkbox" id="collect-resume" class="checkbox-input" checked>
                        <span class="checkbox-label">收集简历附件</span>
                    </label>
                </div>

                <div class="filter-group">
                    <label class="title">设备指纹</label>
                    <div style="margin-bottom: 8px;">
                        <div style="display: flex; align-items: center; margin-bottom: 5px;">
                            <span style="font-size: 12px; color: #666; margin-right: 8px;">当前设备指纹:</span>
                            <button id="refresh-fingerprint" style="font-size: 11px; background: #1a73e8; color: white; border: none; border-radius: 4px; padding: 2px 6px; cursor: pointer;">刷新</button>
                        </div>
                        <div id="fingerprint-display" style="font-family: monospace; font-size: 11px; background: #f5f5f5; padding: 5px; border-radius: 4px; word-break: break-all; color: #333; min-height: 20px;">加载中...</div>
                        <div id="fingerprint-status" style="font-size: 11px; color: #666; margin-top: 5px;">状态检查中...</div>
                    </div>
                </div>

                <div class="filter-group">
                    <label class="title">使用说明</label>
                    <label class="checkbox-wrapper">
                        <span class="checkbox-label">
                            <p>AI高级版使用说明：</p>
                            <p>1. 首先配置AI设置（点击右上角AI配置按钮）</p>
                            <p>2. 添加岗位并详细描述岗位要求</p>
                            <p>3. 在招聘平台筛选好基本条件</p>
                            <p>4. 点击开始，AI将智能判断候选人是否合适</p>
                            <p>5. 关键词功能已隐藏，AI将根据岗位说明进行智能筛选</p>
                            <p>6. 信息里已内置 在线状态、同事沟通记录、当前日期 。如果需要这些条件 请直接在岗位中提示 : 同事最近一个月联系过的请不要联系。只联系在线的。</p>
                        </span>
                    </label>
                </div>

                <div class="filter-group">
                    <label class="title">打赏记录</label>
                    <div id="ai-ranking-list" class="ranking-list">
                        <!-- 排行榜数据将在这里动态显示 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- AI配置弹窗 -->
    <div class="ai-config-modal" id="ai-config-modal">
        <div class="ai-config-content">
            <button class="close-btn" id="ai-config-close">&times;</button>
            <h3>AI配置</h3>

            <!-- 轨迹流动配置 -->
            <div id="siliconflow-config">
                <label>轨迹流动Token:</label>
                <input type="text" id="ai-token" placeholder="请输入您的轨迹流动Token">
                <div style="font-size: 11px; color: #666; margin-bottom: 10px;">
                    * 获取Token请访问：<a href="https://cloud.siliconflow.cn/" target="_blank">轨迹流动官网</a>
                </div>

                <label>模型名称:</label>
                <select id="ai-model">
                    <option value="deepseek-ai/DeepSeek-V3">DeepSeek-V3(快贵)</option>
                    <option value="Qwen/Qwen2.5-7B-Instruct">Qwen/Qwen2.5-7B-Instruct(免费推荐)</option>
                    <option value="THUDM/GLM-4.1V-9B-Thinking">THUDM/GLM-4.1V-9B-Thinking </option>
                    <option value="Qwen/Qwen3-8B">Qwen/Qwen3-8B(便宜)</option>
                    <option value="deepseek-ai/DeepSeek-R1">DeepSeek-R1(慢贵准)</option>
                    <option value="custom">自定义模型</option>
                </select>

                <input type="text" id="ai-custom-model" placeholder="自定义模型名称" style="display: none;">
                <div>
                    默认使用免费的模型。速度快。但是效果一般。 如果你对精度有要求。建议使用DeepSeek-V3(快贵)。需要先前往轨迹流动充值。
                </div>
            </div>

            <button class="save-btn" id="ai-config-save2">保存配置</button>

        </div>
    </div>

    <div
        style="position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
        <div style="text-align: center;margin-top: 4px;">
            <a href="http://58it.cn" style="color: #1a73e8;" target="_blank">联系我</a>
            <a href="http://58it.cn" style="color: #1a73e8;" target="_blank">打赏我</a>
            <a style="margin-left: 10px;color: #1a73e8;" href="http://goodhr.58it.cn" target="_blank">前往官网</a>
            <a style="margin-left: 10px;color: #e81a1a;" href="http://goodhr.58it.cn" target="_blank">分享给另一个HR</a>
        </div>
        <div class="bottom-controls">
            <!-- 功能选择勾选框 -->
            <!-- <div style="display: flex; justify-content: center; padding: 8px 0;">
                <label style="margin: 0 10px; display: flex; align-items: center;">
                    <input type="checkbox" id="greeting-checkbox" checked style="margin-right: 4px;">
                    打招呼
                </label>
                <label style="margin: 0 10px; display: flex; align-items: center;">
                    <input type="checkbox" id="communication-checkbox" checked style="margin-right: 4px;">
                    处理沟通
                </label>
            </div> -->
            
            <!-- 初始状态的按钮组 -->
            <div class="initial-buttons" id="initialButtons">
                <button id="scrollButton" class="btn primary-btn">
                    <svg class="icon" viewBox="0 0 24 24">
                        <path d="M8 5v14l11-7z" />
                    </svg>
                    开始
                </button>
                <button id="downloadButton" class="btn primary-btn">
                    <svg class="icon" viewBox="0 0 24 24">
                        <path d="M19 9h-4V3H9v6H5l7 7 7-7z" />
                    </svg>
                    下载简历
                </button>
            </div>

            <!-- 停止按钮（初始隐藏） -->
            <div class="stop-buttons hidden" id="stopButtons">
                <button id="stopButton" class="btn danger-btn">
                    <svg class="icon" viewBox="0 0 24 24">
                        <path d="M6 6h12v12H6z" />
                    </svg>
                    停止
                </button>
            </div>
        </div>

        <div style="background: #1e1e1e; color: #00ff00; font-family: 'Consolas', monospace; padding: 8px; height: 100px; overflow-y: auto; font-size: 12px; line-height: 1.5;
        border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
            <div id="log-container" style="display: flex; flex-direction: column;">
                <div class="log-entry" style="display: flex;">
                    <span style="color: #666; margin-right: 8px;">></span>
                    <span>系统就绪，等待开始...</span>
                </div>
            </div>
        </div>
    </div>

    <div style="height: 160px;"></div>

    <script src="../utils/fingerprint-device.js"></script>
    <script src="../config.js"></script>
    <script src="index.js"></script>
</body>

</html>